<template>
  <div id="header">
    <div>
      <div id="logo"></div>
      <ul class="list">
          <!--<router-link :to="{path: '/BusinessManagement',name:'BusinessManagement',params:{indexs: 2.1}}" class="router">-->
            <!--<li @click.stop="linkToBusinessManagement">-->
              <!--<i class="inlineBlockIcon qiye"></i>-->
              <!--<span class="topList_title">企业管理</span>-->
            <!--</li>-->
          <!--</router-link>-->
        <li @click.stop="linkToBusinessManagement">
          <router-link :to="{path: '/BusinessManagement',name:'BusinessManagement',params:{indexs: 2.1}}" class="router">
            <i class="inlineBlockIcon qiye"></i>
            <span class="topList_title">企业管理</span>
          </router-link>
        </li>
        <li>
          <a href="http://www.zhjjkc.com" target="_blank">
            <i class="inlineBlockIcon zixun"></i>
            <span class="topList_title">资讯中心</span>
          </a>
        </li>
        <li class="hiddenBOX" @mouseover='phoneISshow' @mouseout="phoneIShidden">
          <!--<div>-->
            <i class="inlineBlockIcon fuwu"></i>
            <span class="topList_title">服务中心</span>
          <!--</div>-->
          <div class="phone" v-show="phoneisshow">
            <i class="jiao"></i>
            <div class="phoneLOGO"></div>
            <div class="phoneContentBOX">
              <span class="phoneTitle">服务热线</span>
              <span class="phoneNum">400-888-1212</span>
            </div>
          </div>
        </li>
        <li>
          <router-link :to="{path: '/pinfen',name:'pinfen'}" class="router">
            <i class="inlineBlockIcon pingu"></i>
            <span class="topList_title">评估报告</span>
          </router-link>
        </li>
      </ul>
    </div>
    <ul class="list">
      <li>
        <router-link :to="{path: '/userCenter',name:'userCenter'}" class="router">
          <i class="inlineBlockIcon user"></i>
          <span class="topList_title" v-show="!ishave">{{user_name}}</span>
          <span class="topList_title" v-show="ishave">{{userName}}</span>
        </router-link>
      </li>
      <li @click="toOut">
        <i class="inlineBlockIcon tuichu"></i>
        <span class="topList_title">退出</span>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'CommonHeader',
    props:['userName'],
    data () {
      return {
        phoneisshow:false,
        user_name:this.$store.state.userName,
        ishave:false
      }
    },
    created(){
      if(this.userName){
        this.ishave = true
      }
    },
    methods: {
      toOut () {
        this.axios.get('/index/logout').then((res)=>{
          if(res.data.code==1){
            this.$store.commit('login',false)
            this.$store.commit('routerCurrent',1)
            this.$store.commit('BoxCurrent',1)
            this.$router.push('/login')
          }
        })
      },
      linkToBusinessManagement(){
        this.$store.commit('routerCurrent',2)
        this.$store.commit('BoxCurrent',2.1)
      },
      phoneISshow(){
        this.phoneisshow = true
      },
      phoneIShidden(){
        this.phoneisshow = false
      }
    }
  }
</script>

<style scoped>
  @import '../assets/public.css';
  #header{
    width:100%;
    height: 120px;
    background-color: #4797D4;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  #header>div{
    display: flex;
    align-items: center;
  }
  #logo{
    width:262px;
    height:82px;
    background-image: url("img/top_logo.png");
    margin:0 70px 0 32px;
  }
  .list{
    display: flex;
    align-items: center;
  }
  .list li{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right:56px;
    cursor: pointer;
  }
  .list li>a{
    display: flex;
    flex-direction: column;
    align-items: center;
    /*margin-right:56px;*/
    cursor: pointer;
  }
  .hiddenBOX{
    position: relative;
  }
  .phone{
    background-color: #fff;
    position:absolute;
    top:90px;
    left:0;
    align-items: flex-start;
    /*height:100px;*/
    padding-top:20px;
    padding-left:33px;
    width:214px;
    height:60px;
    display: flex;
    box-shadow: 2px 2px 5px #e6e6e6;
    z-index: 2;
  }
  .jiao{
    position: absolute;
    width: 0;
    height: 0;
    border-bottom: 20px solid #fff;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    top:-20px;
  }
  .phoneLOGO{
    display: inline-block;
    width:34px;
    height:34px;
    background-image: url("img/phone.png");
    background-size: 100% 100%;
    margin-right: 12px;
  }
  .phoneContentBOX{
    display: flex;
    flex-direction: column;
  }
  .phoneTitle{
    color: #666;
    font-size:12px;
  }
  .phoneNum{
    color:#3C7FAF;
    font-size:16px;
  }
  .qiye{
    width: 37px;
    height:40px;
    background-image: url("img/top_qiye.png");
    margin-bottom:14px;
  }
  .zixun{
    width: 36px;
    height:36px;
    background-image: url("img/top_zixun.png");
    margin-bottom:14px;
  }
  .fuwu{
    width: 33px;
    height:36px;
    background-image: url("img/top_fuwu.png");
    margin-bottom:15px;
  }
  .pingu{
    width: 32px;
    height:36px;
    background-image: url("img/top_pingu.png");
    margin-bottom:13px;
  }
  .user{
    width: 36px;
    height:36px;
    background-image: url("img/top_userLogo.png");
    margin-bottom:16px;
  }
  .tuichu{
    width: 34px;
    height:36px;
    background-image: url("img/top_tuichu.png");
    margin-bottom:16px;
  }
  .topList_title{
    color: #C3E5FF;
    font-size:16px;
  }
</style>
